<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="keywords" content="小米,小米手机,小米平衡车,小米路由器,小米电视">
		<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">
		<meta name="renderer" content="webkit">
		<title>条件渲染</title>
    <script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		
		<div id="app">
			<!--案例一-->
			<!--<div v-if="seen">{{message}}</div>
			<div v-else>By world</div>-->
			
			<!--案例二-->
			<!--<div v-if="show === 'a'">This is a</div>
			<div v-else-if="show === 'b'">This is b</div>
			<div v-else>This is others</div>-->
			
			<!--案例三-->
			<div v-if="seen">
			  用户名 : <input key="username" />
			</div>
			<div v-else>
				邮箱名字:<input key="password" />
			</div>
		</div>
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					message:"hello world",
					seen:true,
					show:"a"
				}
			})
			/*v-if,他的真或假决定了这个div标签是否挂载这页面之上*/
			/*v-if会把元素内容从节点上删除,v-show只是隐藏起来*/
			/*key,在vue中,key值是页面上唯一的东西,如果改变了那么input里面内容没保存也很正常*/
		</script>
	</body>
</html>
